<template>
 <!-- <view class="falling-leaves">
    <view class="leaf" v-for="leaf in leaves" :key="leaf.id"></view>
  </view> -->
</template>

<script>
export default {
  data() {
    return {
      leaves: [], // 落叶数组
	  stop:'',
	  staticx:''
    };
  },
  // mounted() {
  //   const numLeaves = 20; // 落叶数量

  //   // 创建落叶对象并添加到数组中
  //   for (let i = 0; i < numLeaves; i++) {
  //     this.createLeaf();
  //   }
  // },
  methods: {
					// var stop, staticx;
	  			// var img = new Image();
	   
	  			function Sakura(x, y, s, r, fn) {
	  				this.x = x;
	  				this.y = y;
	  				this.s = s;
	  				this.r = r;
	  				this.fn = fn;
	  			}
	   
	  			Sakura.prototype.draw = function(cxt) {
	  				cxt.save();
	  				var xc = 40 * this.s / 4;
	  				cxt.translate(this.x, this.y);
	  				cxt.rotate(this.r);
	  				cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
	  				cxt.restore();
	  			}
	   
	  			Sakura.prototype.update = function() {
	  				this.x = this.fn.x(this.x, this.y);
	  				this.y = this.fn.y(this.y, this.y);
	  				this.r = this.fn.r(this.r);
	  				if(this.x > window.innerWidth ||
	  					this.x < 0 ||
	  					this.y > window.innerHeight ||
	  					this.y < 0
	  				) {
	  					this.r = getRandom('fnr');
	  					if(Math.random() > 0.4) {
	  						this.x = getRandom('x');
	  						this.y = 0;
	  						this.s = getRandom('s');
	  						this.r = getRandom('r');
	  					} else {
	  						this.x = window.innerWidth;
	  						this.y = getRandom('y');
	  						this.s = getRandom('s');
	  						this.r = getRandom('r');
	  					}
	  				}
	  			}
	   
	  			SakuraList = function() {
	  				this.list = [];
	  			}
	  			SakuraList.prototype.push = function(sakura) {
	  				this.list.push(sakura);
	  			}
	  			SakuraList.prototype.update = function() {
	  				for(var i = 0, len = this.list.length; i < len; i++) {
	  					this.list[i].update();
	  				}
	  			}
	  			SakuraList.prototype.draw = function(cxt) {
	  				for(var i = 0, len = this.list.length; i < len; i++) {
	  					this.list[i].draw(cxt);
	  				}
	  			}
	  			SakuraList.prototype.get = function(i) {
	  				return this.list[i];
	  			}
	  			SakuraList.prototype.size = function() {
	  				return this.list.length;
	  			}
	   
	  			function getRandom(option) {
	  				var ret, random;
	  				switch(option) {
	  					case 'x':
	  						ret = Math.random() * window.innerWidth;
	  						break;
	  					case 'y':
	  						ret = Math.random() * window.innerHeight;
	  						break;
	  					case 's':
	  						ret = Math.random();
	  						break;
	  					case 'r':
	  						ret = Math.random() * 6;
	  						break;
	  					case 'fnx':
	  						random = -0.5 + Math.random() * 1;
	  						ret = function(x, y) {
	  							return x + 0.5 * random - 1.7;
	  						};
	  						break;
	  					case 'fny':
	  						random = 1.5 + Math.random() * 0.7
	  						ret = function(x, y) {
	  							return y + random;
	  						};
	  						break;
	  					case 'fnr':
	  						random = Math.random() * 0.03;
	  						ret = function(r) {
	  							return r + random;
	  						};
	  						break;
	  				}
	  				return ret;
	  			}
	   
	  			function startSakura() {
	   
	  				requestAnimationFrame = window.requestAnimationFrame ||
	  					window.mozRequestAnimationFrame ||
	  					window.webkitRequestAnimationFrame ||
	  					window.msRequestAnimationFrame ||
	  					window.oRequestAnimationFrame;
	  				var canvas = document.createElement('canvas'),
	  					cxt;
	  				staticx = true;
	  				canvas.height = window.innerHeight;
	  				canvas.width = window.innerWidth;
	  				canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
	  				canvas.setAttribute('id', 'canvas_sakura');
	  				document.getElementsByTagName('body')[0].appendChild(canvas);
	  				cxt = canvas.getContext('2d');
	  				var sakuraList = new SakuraList();
	  				for(var i = 0; i < 50; i++) {
	  					var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
	  					randomX = getRandom('x');
	  					randomY = getRandom('y');
	  					randomR = getRandom('r');
	  					randomS = getRandom('s');
	  					randomFnx = getRandom('fnx');
	  					randomFny = getRandom('fny');
	  					randomFnR = getRandom('fnr');
	  					sakura = new Sakura(randomX, randomY, randomS, randomR, {
	  						x: randomFnx,
	  						y: randomFny,
	  						r: randomFnR
	  					});
	  					sakura.draw(cxt);
	  					sakuraList.push(sakura);
	  				}
	  				stop = requestAnimationFrame(function() {
	  					cxt.clearRect(0, 0, canvas.width, canvas.height);
	  					sakuraList.update();
	  					sakuraList.draw(cxt);
	  					stop = requestAnimationFrame(arguments.callee);
	  				})
	  			}
	   
	  			window.onresize = function() {
	  				var canvasSnow = document.getElementById('canvas_snow');
	  				canvasSnow.width = window.innerWidth;
	  				canvasSnow.height = window.innerHeight;
	  			}
	   
	  			img.onload = function() {
	  				startSakura();
	  			}
	   
	  			function stopp() {
	  				if(staticx) {
	  					var child = document.getElementById("canvas_sakura");
	  					child.parentNode.removeChild(child);
	  					window.cancelAnimationFrame(stop);
	  					staticx = false;
	  				} else {
	  					startSakura();
	  				}
	  			}
	
    // createLeaf() {
    //   const leaf = {
    //     id: Date.now() + Math.random(), // 唯一标识符
    //     left: Math.random() * 100, // 随机水平位置
    //     delay: Math.random() * 5, // 随机动画延迟
    //   };

    //   this.leaves.push(leaf);

    //   // 删除落叶对象以避免堆积
    //   setTimeout(() => {
    //     const index = this.leaves.findIndex((item) => item.id === leaf.id);
    //     if (index !== -1) {
    //       this.leaves.splice(index, 1);
    //       this.createLeaf();
    //     }
    //   }, leaf.delay * 1000);
    // },
  },
};
</script>

<style scoped>
.falling-leaves {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.leaf {
  width: 20px; /* 落叶宽度 */
  height: 20px; /* 落叶高度 */
  background-color: #e28972; /* 落叶颜色 */
  position: absolute;
  border-radius: 50%;
  transform-origin: center bottom;
  animation: fall 5s linear infinite; /* 落叶动画 */
}

@keyframes fall {
  0% {
    transform: translateY(0); /* 落叶初始位置 */
    opacity: 1;
  }
  100% {
    transform: translateY(100vh); /* 落叶结束位置 */
    opacity: 0;
  }
}
</style>
